/*eslint-disable*/
import React, { useState, useEffect } from 'react'
import { Swiper } from 'react-vant';
import { Grid } from 'react-vant';
import './home.css'
import { Search ,Icon} from 'react-vant';
import request from '../../utils/request';
import Footer from '../../components/Footer'
import { DownOutline } from 'antd-mobile-icons'
import {NavLink} from 'react-router-dom'


const home = (props) => {

    const {history}=props
    //搜索框数据
    const [value, setValue] = useState('');

    const [data, setData] = useState([])

    const [news,setNew]=useState([])

    const [city, setCity] = useState("");

    useEffect(() => {
        getlist();
        getnew();
    }, [])

    const goback=()=>{
        history.push('/hunting')
    }

    const setimg1=()=>{
        history.push('/swiper1')
    }
    const setimg2=()=>{
        history.push('/swiper2')
    }
    const setimg3=()=>{
        history.push('/swiper3')
    }

    const gorent=()=>{
        history.push('/rent')
    }
    const gomap=()=>{
        history.push('/map')
    }
    const getlist = async () => {
        setCity(JSON.parse(localStorage.getItem("city")));
        request({
            url: "/home/groups",
            method: "get"
        }).then(res => {
            // console.log(res);
            setData([...res.data.body])
        })
    }
    
    const getnew=async()=>{
        request({
            url:"/home/news",
            method:"get"
        }).then(res=>{
            setNew([...res.data.body])
        })
    }
    return (
        <div>
            <header>
                <div className="home-head">
                <NavLink to="/city">{city}<DownOutline /></NavLink>
                    <div><Search value={value} onChange={setValue} placeholder="请输入小区或地址" /></div>
                    <div><Icon name="aim" onClick={()=>{
                        gomap()
                    }}/></div>
                </div>
                <div className="swiper-img">
                    <Swiper className="my-swipe" autoplay={3000}>
                        <Swiper.Item><img src="http://47.102.145.189:8009/img/swiper/1.png" alt="" onClick={()=>{
                            setimg1()
                        }}/></Swiper.Item>
                        <Swiper.Item><img src="http://47.102.145.189:8009/img/swiper/2.png" alt="" onClick={()=>{
                            setimg2()
                        }}/></Swiper.Item>
                        <Swiper.Item><img src="http://47.102.145.189:8009/img/swiper/3.png" alt="" onClick={()=>{
                            setimg3()
                        }}/></Swiper.Item>
                    </Swiper>
                </div>

                <div className="home-center">
                    <Grid>
                        <Grid.Item icon="shop-o" text="整租" onClick={()=>goback()}/>
                        <Grid.Item icon="friends-o" text="合租"/>
                        <Grid.Item icon="eye-o" text="地图找房" />
                        <Grid.Item icon="shop-collect-o" text="去出租" onClick={()=>{gorent()}}/>
                    </Grid>
                </div>
                <div className="home-main">
                    <div className="home-b">
                        <b>租房小组</b>
                        {/* <p>更多</p> */}
                    </div>
                    <div className="home-zu">
                        {
                            data.length && data.map((item, idx) => {
                                return <div key={idx} className="home-a">
                                   <div className="home-tit">
                                   <div className="left">
                                        <b>{item.title}</b>
                                        <p>{item.desc}</p>
                                    </div>
                                    <div className="right">
                                        <img src={item.imgSrc} alt="" />
                                    </div>
                                   </div>
                                </div>
                            })
                        }
                    </div>
                    <div className="home-news">
                        <div className="zixun">
                            <b>最新资讯</b>
                        </div>
                        <div className="home-data">
                            {
                                news.length && news.map((v,i)=>{
                                    return <div key={i}>
                                        <div className="home-from">
                                            <dl>
                                                <dt>
                                                    <img src={v.imgSrc} alt=""/>
                                                </dt>
                                                <dd>
                                                    <b>{v.title}</b>
                                                    <div className="home-zx">
                                                        <p>{v.from}</p>
                                                        <p>{v.date}</p>
                                                    </div>
                                                </dd>
                                            </dl>
                                        </div>
                                        <div className="home-title"></div>
                                    </div>
                                })
                            }
                        </div>
                    </div>
                </div>
            </header>
            <main>

            </main>
            <footer>
                <Footer/>
            </footer>
        </div>
    )
}

export default home

